
.page_01{
  position: relative;
  .top{
    width: 100%;
    height: 44px;
    background-color: #023561;
    border-top:2px solid #023E70;
    border-bottom:2px solid #023E70;
    position: relative;
    margin-bottom: 23px;
    h3{
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 44px;
      font-size: 20px;
      color:rgba(20,143,237,1);

    }
    span{
      position: absolute;
      width: 11px;
      height: 17px;
      top: 13px;
      left: 15px;
      background-image: url(../images/rank/b_arrow.png);
      background-position: center center;
      background-size: cover;

    }
  }
  .big_book{
    width: 100%;
    margin-bottom: 10px;
    .bg_big_p{
      width: 169px;
      height: 195px;
      margin: 0 auto;
      background-image: url(../images/rank/big_%20polygon.png);
      background-position: center center;
      background-size: 169px 195px;
      position: relative;
      .bg_big_book{
        position: absolute;
        width: 99px;
        height: 139px;
        background-image: url(../images/rank/big_book.png);
        background-position: center center;
        background-size: 99px 139px;
        top: 18px;
        left: 50%;
        -webkit-transform:translate(-50%) ;
      }


    }
    .txt_cirle{
      position: absolute;
      bottom: 12px;
      left:50%;
      -webkit-transform: translate(-50%);
      color:#fff;
      font-size: 0.18rem;
      .cirle{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-image: url(../images/rank/circle.png);
        background-position: center center;
        background-size: 20px 20px;
        text-align: center;
        line-height: 20px;

      }
    }

  }
  .text{
    text-align: center;
    color:#fff;
    font-family: 'MyriadPro Regular';
    margin-bottom: 10px;
    p:nth-of-type(1){
      font-size: 0.24rem;
      //font-size: 24px;

    }
    p:nth-of-type(2){
      font-size: 0.18rem;
      //font-size: 18px;
      line-height: 30px;

    }
    p:nth-of-type(3){
      font-size: 0.18rem;
      //font-size: 18px;

    }

  }
  .small_book{
    width: 100%;
    margin-bottom: 20px;
    .bg_small_p{
      width: 119px;
      height: 138px;
      margin: 0 auto;
      background-image: url(../images/rank/more_polygon.png);
      background-position: center center;
      background-size: 119px 138px;
      position: relative;
      .bg_small_book{
        position: absolute;
        width: 70px;
        height: 99px;
        background-image: url(../images/rank/big_book.png);
        background-position: center center;
        background-size: 70px 99px;
        top: 18px;
        left: 50%;
        -webkit-transform:translate(-50%) ;
      }


    }
    .txt_cirle2{
      position: absolute;
      bottom: -10px;
      left:50%;
      -webkit-transform: translate(-50%);
      color:#fff;
      font-size: 0.16px;
      .cirle2{
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-image: url(../images/rank/circle.png);
        background-position: center center;
        background-size: 15px 15px;
        text-align: center;
        line-height: 15px;

      }
    }

  }
  .three{
    position: absolute;
    top:35%;
    right:-28%;
    .bg_small_p {
      width: 119px;
      height: 138px;
      margin: 0 auto;
      background-image: url(../images/rank/more_polygon.png);
      background-position: center center;
      background-size: 119px 138px;
    }

      .txt_cirle2{
      font-size: 0.14rem;
      .cirle2{
        width: 12px;
        height: 12px;
        background-size: 12px 12px;
        line-height: 12px;



      }
    }

  }


}